<template>
  <div class="list">
<view class="input_search">
  <uv-input
  
  v-model="inputSearch"
  customStyle="border:none;background-color:#F5F6F8"
  shape="circle"
		    placeholder="输入关键字搜索商品"
		    prefixIcon="search"
		    prefixIconStyle="font-size: 30rpx;color: #909399"
		></uv-input>
</view>

<view class="tabs">
  <view @click="clickTabs(item)" v-for="(item) in tabList" :key="item.name"  :class="item.active ? 'tabs_item_active' : ''"  class="tabs_item">{{item.name}}</view>

</view>


<view class="list_background">

  <view v-if="goodsList.length>0" class="list_goods">
          <view @click="goToDetail(item)" v-for="(item,index) in goodsList" :key="index" class="item">
			<uv-image mode='widthFix' :lazy-load="true" :src="item.imgUrl" width="100%" ></uv-image>
             <view class="item_title">
			
				<p class="span_p" style="text-align: left;font-size: 24rpx;">
					<view style="margin-right: 5rpx;" class="nianhuo">
					{{ item.tips || '上新商品' }}
				</view>
				
				<text>
					{{ item.goodsTitle }}
				</text>
					</p>
			 </view>

			 <view class="prive_title">

				<span class="price_red">￥{{ item.goodsPrice }} </span>

				<span class="price_scale">已售{{ item.goodsSold }} </span>
			 </view>

			 <view style="display: none;" class="margin_top_bottom">
             <view class="box1">多人拼团</view>
			 <view class="box2">
              <view class="quan">券</view>
			  <view class="quan2">满100元减30</view>
			 </view>
			 </view>

			 <view class="shopmall"> {{ item.shopName || '无店铺' }} 	<uv-icon name="arrow-right" color="#8D8D8D" size="12"></uv-icon></view>
		  </view>

		

	</view>

   <view style="margin-top: 100rpx;" v-else>
    <uv-empty text="搜到的商品为空，请重新搜索吧" iconColor="#fff" mode="car" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
   </view>
</view>

  </div>
</template>

<script setup>

import { onShow ,onReachBottom} from '@dcloudio/uni-app';
import { ref, watch } from 'vue'
import {getGoodsList} from '../https/api/list'
let inputSearch = ref(null)


let sizeNum = ref(14)
let totalNum = ref(0)
let sortNum = ref(0)
onReachBottom(()=>{

	if(totalNum.value>=sizeNum.value){
		sizeNum.value += 14
		getGoodsListData({ current: 1,
      prodName: inputSearch.value,
      size: sizeNum.value,
      sort: sortNum.value})
	}else{
		uni.showToast({
			title:'没有更多了',
			icon:'none'
		})
		
	}
	
})




let goToDetail = (item) => {
	uni.setStorageSync('goodsDetailData',JSON.stringify(item))
	uni.navigateTo({
		url:'/pages/goodsDetail',

	})
}

let clickTabs = (item) => {
  tabList.value.forEach(items => {
    items.active = false
 
})



item.active = true

if(item.name == '综合'){

	sortNum.value = 0
	getGoodsListData({ current: 1,
      prodName: inputSearch.value,
      size: sizeNum.value,
      sort: sortNum.value})
}else if(item.name == '销量'){
	sortNum.value = 1
	getGoodsListData({ current: 1,
      prodName: inputSearch.value,
	  size: sizeNum.value,
      sort: sortNum.value})
}else if(item.name == '价格'){
	sortNum.value = 2
	getGoodsListData({ current: 1,
      prodName: inputSearch.value,
	  size: sizeNum.value,
      sort: sortNum.value})
}


}

let tabList = ref([{
  name:'综合',
  active: true,
}
,
{
  name:'销量',
  active: false,
},
{
  name:'价格',
  active: false,
}
])

onShow(()=>{
  let text = uni.getStorageSync('inputSearch')
  if(text){
    inputSearch.value = text
  }
})


let goodsList = ref([])
let getGoodsListData =async (data) => {
  let res = await getGoodsList(data)
  if(res){
	goodsList.value = res.data.records.map(v=>{
		return {
			...v,
			imgUrl:v.pic,
			goodsPrice:v.price,
			goodsTitle:v.prodName,
			goodsSold:v.prodId,
			
		 }
	})
  }
}


let sts = ref(0)
watch(inputSearch,()=>{
getGoodsListData({ current: 1,
      prodName: inputSearch.value,
      size: sizeNum.value,
      sort: sortNum.value})
})
</script>

<style lang="scss" scoped>

.list_goods{
	padding: 20rpx;
	.prive_title{
		margin-top: 8rpx;
		padding: 0 15rpx;
	}
	.shopmall{
		margin-top: 10rpx;
		display: flex;
  color: #8D8D8D;
  font-size: 22rpx;
  margin-bottom: 20rpx;
  padding: 0 15rpx;
	}
	.margin_top_bottom{
		padding: 0 15rpx;
		margin-bottom: 8rpx;
		margin-top: 6rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.box1{
			margin-right: 20rpx;
			border: 1px solid #FF1C23;
			width: 85rpx;
			height: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #DF0024;
			font-size: 18rpx;
		}
.box2{
	display: flex;
	align-items: center;
	margin-right: 20rpx;
}
	  .quan{
		padding: 1rpx;
		border: 1px solid #FF1C23;
		border-right: 1px dashed #FF1C23;
		color: #DF0024;
		font-size: 18rpx;
	  }
	  .quan2{
		padding: 1rpx;
		border: 1px solid #FF1C23;
		border-left: none;
		color: #DF0024;
		font-size: 18rpx;
	  }

	

	}
	.price_red{
		color: #FF1C23;
		font-size: 31rpx;
	}
	.price_scale{
		margin-left: 20rpx;
		color:#8D8D8D;
		font-size:22rpx;
	}
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	.item{
		margin-bottom: 20rpx;
		width: 49%;
     border-radius: 15rpx;
	 background: white;
	 .item_title{
		font-size: 25rpx;
		padding: 0 15rpx;
		margin-top: 15rpx;
		
		align-items: center;
	}
	.span_p{
		overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;  // 控制多行的行数
    -webkit-box-orient: vertical;


	}
	.nianhuo{
		display: inline-block;;
		border-radius: 10rpx;
		vertical-align: middle;
		font-size: 20rpx;
		background-image: linear-gradient(135deg, rgb(246, 175, 175), red);
		// width: 54rpx;
		height: 28rpx;
		text-align: center;
		color: white;
		font-weight: bolder;
		line-height: 28rpx;
       display: inline-block;
	}
	}
	
}

.list_background{
  height: 90vh;
  border-top: 1px solid transparent;
  background: #F5F6F8FF;

}
.tabs_item{
	font-size: 25rpx;
}

.tabs_item_active::after{
  position: absolute;
  content: '';
  width: 50%;
  left: 50%;
  transform: translateX(-50%);
  bottom: -15rpx;
 
  height: 3rpx;
  background:#DF0024FF ;
  
}
.tabs{
  padding: 0rpx 60rpx;
  padding-bottom: 15rpx;
  color: #8D8D8DFF;
  font-family: Microsoft YaHei;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tabs_item_active{
  transition: all .5s;
 position: relative;
 color: #DF0024FF;
}
.input_search{
  padding: 20rpx;
}
</style>